<template>
  <div class="course-detail">
    <Header :info="details" />
    <div class="course-detail__body">
      <Tab
        v-model="currentTab"
        :tab-cfg="tabCfg"
      />
      <el-card shadow="never" style="border: none;" class="content">
        <div class="title">
          <div class="title-border" />
          <h3>{{ titleFormatter }}</h3>
        </div>
        <div class="body">
          <Component
            :is="currentTab"
            v-bind="componentProps"
            v-on="componentEmit"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { getCourseDetails } from '@/api/v2/course'

import Header from './components/Detail/Header.vue'
import Tab from './components/Detail/Tab.vue'
import CourseContent from './components/Detail/CourseContent.vue'
import CourseProfile from './components/Detail/CourseProfile.vue'
import TestList from './components/Detail/TestList.vue'
import UserList from './components/Detail/UserList.vue'
export default {
  name: '',
  components: {
    Header,
    Tab,
    CourseContent,
    CourseProfile,
    TestList,
    UserList
  },
  data() {
    return {
      details: {},
      courseId: null,
      currentTab: 'CourseContent',
      tabCfg: [
        { label: '课程内容', value: 'CourseContent' },
        { label: '课程资料', value: 'CourseProfile' },
        { label: '课程测试', value: 'TestList' },
        { label: '用户列表', value: 'UserList' }
      ],
      userList: []
    }
  },
  computed: {
    titleFormatter() {
      return this.tabCfg.filter(v => v.value === this.currentTab)[0].label
    },
    componentProps() {
      const props = {
        CourseContent: {
          'section-data': this.details?.chapter,
          'courseId': this.courseId,
          'haveUnitTestEnd': this.details?.unitTestEnd?.length > 0
        },
        TestList: {
          'courseId': this.courseId
        },
        UserList: {
          'userList': this.userList
        }
      }
      return props[this.currentTab]
    },
    componentEmit() {
      const emit = {
        CourseContent: {
          refresh: () => this.courseContentRefresh()
        }
      }

      return emit[this.currentTab]
    }
  },
  created() {
    const { params } = this.$route
    this.courseId = params.id / 1
    this.getCourseDetails()
  },
  methods: {
    async getCourseDetails() {
      try {
        const res = await getCourseDetails(this.courseId)
        console.log('res --------->', res)
        this.details = res.data
        const { users } = res.data
        this.userList = users
      } catch (error) {
        this.$message.error(error.message)
      }
    },

    courseContentRefresh() {
      console.log('触发 --------->', '触发')
      this.getCourseDetails()
    }

  }
}
</script>
<style lang="scss" scoped>
.course-detail {
  &__body {
    position: relative;
    z-index: 3;
    padding: 20px 152px;
    display: flex;
    //justify-content: center;
    .content {
      margin-left: 20px;
      width: calc(100% - 250px);

      .title {
        display: flex;
        &-border {
          width: 3px;
          height: 25px;
          background-color: #409EFF;
        }
        h3 {
          margin: 0 0 0 10px;
          display: flex;
          align-items: center;
        }
      }

      .body {
        margin-top: 20px;
      }

    }
  }
}
</style>
